<template>
  <div class="energy_consume">
    <div class="top_query">
      <div class="query_top">
        <px-form ref="queryTypeRef" :model="queryTypeParams" :inline="true" label-width="74px">
          <px-form-item prop="dataFormat" style="width: 580px">
            <px-radio-group v-model="queryTypeParams.energyType" class="tabSwitch" @change="handleChangeTypeFn">
              <px-radio-button label="Electricity">电</px-radio-button>
              <px-radio-button label="Water">水</px-radio-button>
              <px-radio-button label="NG">天然气</px-radio-button>
              <px-radio-button label="HotStream">蒸汽/热水</px-radio-button>
              <px-radio-button label="Gas">大宗气</px-radio-button>
              <px-radio-button label="Diesel">柴油</px-radio-button>
            </px-radio-group>
          </px-form-item>
        </px-form>
      </div>
      <!-- <px-radio-group v-model="tabPosition" class="tabSwitch">
        <px-radio-button label="supplyConsume">子系统消耗</px-radio-button>
        <px-radio-button label="overView">机台消耗</px-radio-button>
      </px-radio-group> -->
      <div class="query_mid">
        <CustomTabs :tabList="tabsOption" :activeName="tabPosition" @tabSelect="tabSelectHandler" />
        <px-form ref="queryRef" class="custom-form-ui inspection-form" :model="queryParams" :inline="true" label-width="100px">
          <px-form-item label="时间维度" prop="dataFormat" style="width: 260px">
            <px-radio-group v-model="queryParams.queryTimeGranularity" style="margin-left: 10px" @change="handleChangeFn">
              <!-- <px-radio size="small" label="Hourly">小时</px-radio> -->
              <px-radio size="small" label="Daily">日</px-radio>
              <px-radio size="small" label="Monthly">月</px-radio>
              <px-radio size="small" label="Yearly">年</px-radio>
            </px-radio-group>
          </px-form-item>
          <px-form-item label="时间范围" style="width: 380px">
            <!-- <px-time-picker
              v-if="queryParams.queryTimeGranularity === 'Hourly'"
              v-model="dateRange"
              is-range
              range-separator="-"
              format="HH"
              value-format="HH"
              start-placeholder="开始小时"
              end-placeholder="结束小时"
            /> -->
            <px-date-picker
              v-if="queryParams.queryTimeGranularity === 'Daily'"
              v-model="dateRange"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
            <px-date-picker
              v-if="queryParams.queryTimeGranularity === 'Monthly'"
              v-model="dateRange"
              type="monthrange"
              value-format="YYYY-MM"
              range-separator="-"
              start-placeholder="开始月份"
              end-placeholder="结束月份"
              @change="changeFnMonth"
            />
            <!-- <div v-else-if="queryParams.queryTimeGranularity === 'Yearly'" class="select_year">
              <px-date-picker v-model="queryParams.startTime" value-format="YYYY" type="year" placeholder="开始年份" />
              <span>&nbsp;-&nbsp;</span>
              <px-date-picker v-model="queryParams.endTime" value-format="YYYY" type="year" placeholder="结束年份" />
            </div> -->
            <div v-if="queryParams.queryTimeGranularity === 'Yearly'">
              <yearPicker ref="statisticPicker" :labelWidth="0" labelText="" :initYear="dateValue" @updateTimeRange="updateStatisticYear" />
            </div>
          </px-form-item>
          <px-form-item label="厂区">
            <!-- <px-select v-model="queryParams.level" clearable placeholder="请选择层级">
              <px-option v-for="item in classNameArr" :key="item.value" :label="item.label" :value="item.value" />
            </px-select> -->
            <px-select v-model="queryParams.factory" clearable placeholder="请选择层级">
              <px-option v-for="item in systemList" :key="item.value" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
          <px-button type="primary" icon="" @click="handleQuery">搜索</px-button>
          <px-button icon="" @click="resetQuery">重置</px-button>
        </px-form>
      </div>
    </div>
    <!-- <div v-if="timeType === 'Hourly'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=2024-06-01 00:00:00&endTime=2024-07-09 23:59:59&factory=创新中心一期`"
        frameborder="0"
      />
    </div> -->
    <div v-if="timeType === 'Daily' && tabPosition === 'supplyConsume'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Monthly' && tabPosition === 'supplyConsume'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Yearly' && tabPosition === 'supplyConsume'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Daily' && tabPosition === 'overView'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Monthly' && tabPosition === 'overView'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
    <div v-if="timeType === 'Yearly' && tabPosition === 'overView'" class="ffu_total">
      <iframe
        id="preivewFrame"
        class="iframe-con"
        scrolling="no"
        :src="`${VITE_FANRUAN_BASE_URL}/webroot/decision/view/duchamp?viewlet=energy/${templateName}&startTime=${queryParams.startTime}&endTime=${queryParams.endTime}&factory=${factoryName}`"
        frameborder="0"
      />
    </div>
  </div>
</template>
<script setup lang="ts">
import CustomTabs from "@/components/Tabs/index.vue";
import { ref, getCurrentInstance, onMounted, nextTick, computed, onUnmounted } from "vue";
import jsonData from "@/views/common/energy/JSON/supplyPageData.json";
import yearPicker from "@/views/common/energy/components/yearPicker.vue";
import { useRouterStoreHook } from "@/store/modules/router";
import { emitter } from "@/utils/mitt";
import { queryDictData } from "@/api/common";
import { PxMessage } from "px-ui";

const { VITE_FANRUAN_BASE_URL } = import.meta.env;
const energyType = ref("Electricity");
const defaultTime: [Date, Date] = [new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)];
const tabPosition = ref("supplyConsume");
const templateName = computed(() => {
  if (tabPosition.value === "supplyConsume") {
    if (energyType.value === "Water") {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewWaterHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewWaterDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewWaterMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewWaterYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewWaterMonthly")) + ".fvs";
          break;
      }
    } else if (energyType.value === "NG") {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewNGHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewNGDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewNGMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewNGYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewNGMonthly")) + ".fvs";
          break;
      }
    } else if (energyType.value === "HotStream") {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewHotStreamHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewHotStreamDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewHotStreamMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewHotStreamYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewHotStreamMonthly")) + ".fvs";
          break;
      }
    } else if (energyType.value === "Gas") {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewGasHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewGasDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewGasMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewGasYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewGasMonthly")) + ".fvs";
          break;
      }
    } else if (energyType.value === "Diesel") {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewDieselHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewDieselDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewDieselMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewDieselYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewDieselMonthly")) + ".fvs";
          break;
      }
    } else {
      switch (timeType.value) {
        // case "Hourly":
        //   return encodeURIComponent(encodeURIComponent("supplyOverviewElectricityHourly")) + ".fvs";
        //   break;
        case "Daily":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewElectricityDaily")) + ".fvs";
          break;
        case "Monthly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewElectricityMonthly")) + ".fvs";
          break;
        case "Yearly":
          return encodeURIComponent(encodeURIComponent("consumptionOverviewElectricityYearly")) + ".fvs";
          break;
        default:
          return encodeURIComponent(encodeURIComponent("consumptionOverviewElectricityMonthly")) + ".fvs";
          break;
      }
    }
  } else {
    switch (timeType.value) {
      // case "Hourly":
      //   return encodeURIComponent(encodeURIComponent("supplyOverviewElectricityHourly")) + ".fvs";
      //   break;
      case "Daily":
        return encodeURIComponent(encodeURIComponent("consumptionOverviewFabElectricityDaily")) + ".fvs";
        break;
      case "Monthly":
        return encodeURIComponent(encodeURIComponent("consumptionOverviewFabElectricityMonthly")) + ".fvs";
        break;
      case "Yearly":
        return encodeURIComponent(encodeURIComponent("consumptionOverviewFabElectricityYearly")) + ".fvs";
        break;
      default:
        return encodeURIComponent(encodeURIComponent("consumptionOverviewFabElectricityMonthly")) + ".fvs";
        break;
    }
  }
});
const tabsOption = ref<any>([
  {
    name: "supplyConsume",
    label: "子系统消耗"
  },
  {
    name: "overView",
    label: "机台消耗"
  }
]);
const tabSelectHandler = async (selectName: string) => {
  tabPosition.value = selectName;
};
const { proxy }: any = getCurrentInstance();
const activeName = ref("ELECTRICTITY"); // 默认电
emitter.on("viceMenuChange", (val: string) => {
  activeName.value = val;
  midKey.value = Date.now();
});

const midKey = ref(Date.now());

const showDetails = ref<boolean>(false);

const classNameArr = ref([
  {
    name: "厂1",
    value: "1"
  },
  {
    label: "厂2",
    value: "2"
  }
]);

const yearStart = ref("");
const yearEnd = ref("");
// 可选择区间，initYear传参，不传则所有年份有效，小于0判断一下？
// const dateValue = ref<any>({ startYear: new Date().getFullYear() - 9, endYear: new Date().getFullYear() });
const dateValue = ref<any>({});
// 选完/输入完成的回调
const updateStatisticYear: any = (startYear: number, endYear: number) => {
  console.log("选中年份", startYear, endYear);
  dateRange.value = [startYear ? startYear.toString() : "", endYear ? endYear.toString() : ""];
  yearStart.value = `${startYear}-01-01 00:00:00` || null;
  yearEnd.value = `${endYear}-12-31 23:59:59` || null;
};

const systemList = ref<any>([]);
const JSON_DATA = ref<any>(jsonData);

onMounted(async () => {
  systemList.value = await queryDictData({ typeCode: "factoryArea" });
  nextTick(() => {});
  console.log(jsonData);
});
onUnmounted(() => {
  emitter.off("viceMenuChange");
});
const routerStore = useRouterStoreHook();
const energyTitle = computed(() => {
  switch (activeName.value) {
    case "HOT_WATER":
      return "水";
      break;
    case "HOT_STEAM":
      return "蒸汽";
      break;
    case "NG":
      return "LNG";
      break;
    case "ELECTRICTITY":
      return "电";
      break;
    case "HOT_WATER_NEW":
      return "热水";
      break;
    case "CDA":
      return "CDA";
      break;
    default:
      return "";
      break;
  }
});
const dateTitle = computed(() => {
  switch (activeName.value) {
    case "Daily":
      return "日";
      break;
    case "Monthly":
      return "月";
      break;
    case "Yearly":
      return "年";
    default:
      return "";
      break;
  }
});

type itemStyleType = {
  [key: string]: string;
};

interface dataType {
  name: string;
  value: number;
  itemStyle?: itemStyleType;
}
// 获取当天时间
const getNowDate = s => {
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDate();
  const str = s === "start" ? "00:00:00" : "23:59:59";
  return `${year}-${month}-${day} ${str}`;
};

// 定义数据
const dateRange = ref<any>([]);

const changeFnDay = val => {
  // console.log(val);
  // if (val) {
  //   queryParams.value.startTime = val[0];
  //   queryParams.value.endTime = val[1];
  // }
};
const changeFnMonth = val => {
  // console.log(val);
  // if (val) {
  //   queryParams.value.startTime = val[0];
  //   queryParams.value.endTime = val[1];
  // }
};

interface queryForm {
  queryTimeGranularity?: string;
  level?: string;
  factory?: string;
  startTime?: string;
  endTime?: string;
}

const queryParams = ref<queryForm>({
  queryTimeGranularity: "Daily",
  factory: ""
});

const queryTypeParams = ref({
  energyType: "Electricity"
});

const loading = ref(false);
const handleChange = (val: string) => {
  queryParams.value.queryTimeGranularity = "";
  dateRange.value = [];
  queryParams.value.startTime = "";
  queryParams.value.endTime = "";
  if (val) midKey.value = Date.now();
};

// 获取当月第一天
const getCurrentMonthF = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  let d = "01";
  m = m < 10 ? "0" + m : m;
  return [y, m, d].join("-");
};

// 获取当月最后一天
const getCurrentMonthL = () => {
  let date = new Date();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  let d: any = new Date(y, m, 0).getDate();
  m = m < 10 ? "0" + m : m;
  d = d < 10 ? "0" + d : d;
  return [y, m, d].join("-");
};

const handleChangeTypeFn = (val: string) => {
  queryTypeParams.value.energyType = val;
};

const handleChangeFn = (val: string) => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  switch (val) {
    case "Daily":
      dateRange.value = [getCurrentMonthF(), getCurrentMonthL()];
      // queryParams.value.startTime = getCurrentMonthF() + " 00:00:00";
      // queryParams.value.endTime = getCurrentMonthL() + " 23:59:59";
      break;
    case "Monthly":
      // dateRange.value = [`${year}-01`, `${year}-12`];
      dateRange.value = [`${year}-${month}`, `${year}-${month}`];
      // queryParams.value.startTime = dateRange.value[0] + "-01 00:00:00";
      // queryParams.value.endTime = dateRange.value[1] + "-31 23:59:59";
      break;
    case "Yearly":
      let yearS = new Date().getFullYear() - 3;
      let yearE = new Date().getFullYear();
      yearStart.value = `${yearS}-01-01 00:00:00`;
      yearEnd.value = `${yearE}-12-31 23:59:59`;
      break;
    default:
      break;
  }
};

// 校验时间范围不为空
const checkDate = () => {
  if (queryParams.value.queryTimeGranularity) {
    if (dateRange.value && dateRange.value.length) {
      return true;
    }
    if (queryParams.value.startTime && queryParams.value.endTime) {
      return true;
    }
  }
};

const isSerch = ref(false);

// 获取某月最后一天
const getMonthLastDay = (y, m) => {
  let date = new Date(y, m - 1, "01");
  date.setDate(1);
  date.setMonth(date.getMonth() + 1);
  let cdate = new Date(date.getTime() - 1000 * 60 * 60 * 24);
  return cdate.getDate();
};

const timeType = ref("Monthly");
const factoryName = ref("");
/** 搜索按钮操作 */
function handleQuery() {
  timeType.value = queryParams.value.queryTimeGranularity;
  energyType.value = queryTypeParams.value.energyType;
  factoryName.value = queryParams.value.factory;
  console.log(queryParams.value.startTime, queryParams.value.endTime, "******************");
  if (queryParams.value.queryTimeGranularity === "Daily") {
    queryParams.value.startTime = dateRange.value[0] + " 00:00:00";
    queryParams.value.endTime = dateRange.value[1] + " 23:59:59";
    // queryParams.value.startTime =
    //   queryParams.value.startTime.indexOf("00") != -1 ? queryParams.value.startTime : queryParams.value.startTime + " 00:00:00";
    // queryParams.value.endTime = queryParams.value.endTime.indexOf("59") != -1 ? queryParams.value.endTime : queryParams.value.endTime + " 23:59:59";
  } else if (queryParams.value.queryTimeGranularity === "Monthly") {
    queryParams.value.startTime = dateRange.value[0].indexOf("00") != -1 ? dateRange.value[0] : dateRange.value[0] + "-01 00:00:00";
    const d = getMonthLastDay(Number(dateRange.value[1].split("-")[0]), Number(dateRange.value[1].split("-")[1]));
    queryParams.value.endTime = dateRange.value[1].indexOf("59") != -1 ? dateRange.value[1] : dateRange.value[1] + "-" + d + " 23:59:59";
  } else {
    queryParams.value.startTime = yearStart.value;
    queryParams.value.endTime = yearEnd.value;
  }
  console.log(queryParams.value.startTime, queryParams.value.endTime);
  proxy.$refs["queryRef"].validate(valid => {
    if (!valid) return;
    if (queryParams.value.queryTimeGranularity) {
      if (!checkDate()) {
        return PxMessage({
          type: "warning",
          message: "时间范围不能为空"
        });
      }
      // activeTime.value = queryParams.value.queryTimeGranularity;
      // midKey.value = Date.now();
      // isSerch.value = !isSerch.value;
    } else {
      // midKey.value = Date.now();
      // isSerch.value = !isSerch.value;
    }
  });
}
/** 重置按钮操作 */
function resetQuery() {
  initQuery();
}

// 反转数组
const reverseArray = (arr: any[]) => {
  let newArr = [];
  arr.forEach((item: any) => {
    newArr.unshift(item);
  });
  return newArr;
};

let start_time = 0;
// 清除开始时间
const visibleChange = (val: boolean) => {
  start_time = 0;
};
// 根据开始时间禁用结束时间
const calendarChange = ([start]: [Date, Date]) => {
  start_time = start.getTime();
};
// 范围为31天
const time_scope_day = 24 * 60 * 60 * 1000 * 31 - 1;

const disabledDateFn = (time: Date) => {
  const is_disabled = start_time ? time.getTime() < start_time - time_scope_day || time.getTime() > start_time + time_scope_day : false;
  return time.getTime() > Date.now() || is_disabled;
};

// 默认查询条件
const initQuery = () => {
  //获取新的时间
  let date = new Date();
  //获取当前时间的年份转为字符串
  let year = date.getFullYear().toString();
  //获取月份，由于月份从0开始，此处要加1，判断是否小于10，如果是在字符串前面拼接'0'
  let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1).toString() : (date.getMonth() + 1).toString();
  //获取天，判断是否小于10，如果是在字符串前面拼接'0'
  let da = date.getDate() < 10 ? "0" + date.getDate().toString() : date.getDate().toString();
  let y = date.getFullYear(); // 获取年
  let m: any = date.getMonth() + 1; // 获取月
  queryParams.value.queryTimeGranularity = "Monthly";
  timeType.value = "Monthly";
  energyType.value = "Electricity";
  queryParams.value.factory = "";
  dateRange.value = [`${year}-${month}`, `${year}-${month}`];
  queryParams.value.startTime = getCurrentMonthF() + " 00:00:00";
  queryParams.value.endTime = getCurrentMonthL() + " 23:59:59";
};

onMounted(() => {
  // const year = new Date().getFullYear();
  // dateRange.value = [`${year}-01`, `${year}-12`];
  // queryParams.value.startTime = dateRange.value[0] + "-01 00:00:00";
  // queryParams.value.endTime = dateRange.value[1] + "-31 23:59:59";
  // timeType.value = "Yearly";
  initQuery();
});
</script>

<style lang="scss" scoped>
.energy_consume {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .top_turnback {
    margin-bottom: 16px;
  }

  .top_query {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    width: 100%;
    min-width: 1300px;
    height: auto;
    padding: 16px 24px;
    margin-bottom: 16px;
    line-height: 44px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px 0 rgb(0 37 86 / 12%);

    .query_top {
      display: flex;

      /*
      * tab样式
      */
      .tabSwitch {
        min-width: 200px;
        padding: 0 5px;
        margin-right: 20px;
        background-color: #f4f4f4;
        border-radius: 4px;

        :deep(.px-radio-button__inner) {
          background-color: #f4f4f4;
          border: none;
        }

        :deep(.is-active) {
          border: none;

          .px-radio-button__inner {
            background-color: var(--px-color-primary);
            border-radius: 4px;
          }
        }
      }
    }

    .query_mid {
      display: flex;
      gap: 16px;
    }

    .select_year {
      display: flex;
      align-items: center;
      justify-content: left;
      margin-right: 20px;
    }

    .px-form-item {
      margin-bottom: 0;
    }
  }

  .con_top {
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-width: 1300px;
    height: 360px;
    margin-bottom: 16px;

    .con_top_item:nth-child(1) {
      width: 33%;
      margin-right: 16px;
    }

    .con_top_item:nth-child(2) {
      width: 67%;
    }
  }

  .con_bot {
    width: 100%;
    min-width: 1300px;
  }

  .ffu_total {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .iframe-con {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      overflow: hidden !important;
      border: 0;
    }
  }
}
</style>
